<template>
  <div>
    <div style="height: 40px"></div>
    <div class="scancode">
      <div class="circle" @click="handleScanQR">
        <van-icon name="scan" size="80" color="white" />
      </div>
      <div class="mgt10">扫一扫</div>
    </div>
    <div class="selectBox" @click="showPopo">
      <div class="selectInput">
        <span class="defaultText">{{
          selectData.Name ? selectData.Name : '请选择'
        }}</span>
      </div>
      <div class="downicon"></div>
    </div>
    <div class="pdl20 pdr20" style="margin-top: 60px">
      <van-button type="primary" block round @click="goBackPage"
        >确认</van-button
      >
    </div>
    <DevicePopo :title="title" v-model:showPopover="show" @getItem="getItem" />
  </div>
</template>

<script setup name="ScanCode">
import DevicePopo from '@/views/Amobile/components/DevicePopo';
import { getCurrentInstance, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { initConfig } from '@/api/wx/index.js';
import { GetDeviceList_Page } from '@/api/teachDevice/account.js';
const { proxy } = getCurrentInstance();
const show = ref(false);
const selectData = ref({});
const title = ref();
const route = useRoute();
const router = useRouter();
const deviceCode = ref({});
function showPopo() {
  show.value = true;
}

function goBackPage() {
  if (!selectData.value.ID) {
    return proxy.$toast('请先进行选择');
  }
  let query = {
    ID: selectData.value.ID
  };
  router.push({ path: route.query.back, query });
}

function getItem(item) {
  selectData.value = item;
}
function init() {
  switch (Number(route.query.category)) {
    case 1:
      title.value = '教学设备';
      break;
    case 2:
      title.value = '办公工具';
      break;
  }
}
onMounted(() => {
  init();
  initConfig();
});

function handleScanQR() {
  wx.ready(() => {
    wx.scanQRCode({
      // desc: "scanQRCode desc",
      needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
      scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是条形码（一维码），默认二者都有
      success: async res => {
        // 回调
        var result = res.resultStr; //当needResult为1时返回处理结果
        getDevice(result);
      },
      error: res => {
        console.log(res);
        if (res.errMsg.indexOf('function_not_exist') > 0) {
          alert('版本过低请升级');
        }
      }
    });
  });
}

async function getDevice(Code) {
  if (!Code) return proxy.$modal.toast('扫码结果为空');
  try {
    let res = await GetDeviceList_Page({
      Code,
      NoPage: '',
      Category: route.query.category,
      PageIndex: 1,
      PageSize: 10
    });
    selectData.value = res.data?.List?.[0] || {};
    if (!selectData.value.ID) {
      return proxy.$toast('该编号不存在，请手动进行选择');
    }
    goBackPage();
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped>
.scancode {
  //   display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  width: 100rpx;
  height: 100rpx;
  .circle {
    background: linear-gradient(to bottom, #1c5eff, #618eff);
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.selectBox {
  margin: 70rpx 20rpx 0 20rpx;
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  height: 40rpx;
  line-height: 40rpx;
  padding: 0 20rpx;
  border-radius: 40rpx;
  .selectInput {
    margin-right: 20rpx;
    width: 100%;
    // border-bottom: 1px solid #ddd;
    .defaultText {
      color: gray;
    }
  }
  .downicon {
    width: 0rpx;
    height: 0rpx;
    border: 8rpx solid transparent;
    border-top-color: #999;
    transform: translateY(5rpx);
  }
}
</style>
